<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content='text/html; charset=UTF-8'/>
	<link rel="stylesheet" href="syntax-highlighter-1.5.1/css/SyntaxHighlighter.css" type="text/css"/>
    <link rel="stylesheet" href="../src/jplex/components/datatable/assets/datatable.css" type="text/css"/>
    <script src="../src/jPlex.js" type="text/javascript" charset="utf-8"></script>
	<script src="./syntax-highlighter-1.5.1/syntax-highlighter.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        body {
            font: 13px / 18px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
        }
    </style>
</head>
<body>
<h1>jPlex Datatable Demo</h1>
<table id="pwet"></table>
<table id="ProtoString"></table>

<script type="text/javascript">
    jPlex.include("jplex.components.Datatable");

    var schema = {
        root:"ResultSet",
        item:"Result",
        properties:[
            "Title", "Address", "City", "State", "Phone",
            {key:"Rating", path:"Rating/AverageRating"},
            "BusinessUrl"
        ]
    };
    var ds = new DataSource(DataSource.TYPE_XML, "datasource.xml", schema);
    var formatter = function(row, meta) {
        if(parseFloat(meta.data['Rating']) < 4) {
            row.setStyle({background:'darkred', color:'white'});
            return;
        }
        Datatable.DefaultRowFormatter(row, meta);
    };
    var cols = [
        {label:"Pizza", key:"Title", sort:Datatable.Sorter.String},
        {label:"Address", key:"Address", sort:Datatable.Sorter.String} ,
        {label:"City", key:"City", sort:Datatable.Sorter.String},
        {label:"Phone", key:"Phone", sort:Datatable.Sorter.String},
        {label:"Rating", key:"Rating", formatter:Datatable.CellFormatter.Number(2), sort:Datatable.Sorter.Number},
        {label:"URL", key:"BusinessUrl"}
    ];
    var dt = new Datatable("pwet", ds, cols, {
        select: Datatable.SELECT_MULTIPLE,
        rowFormatter: formatter,
        sortedBy: { order:Datatable.Sorter.ORDER_ASC, key:'Title' }
    });

    dt.setEvent("onRowSelectionEvent", function(o) {
        console.log(o);
    });


    var f = function(obj) {
        var res = [];
        return $H(obj.prototype).inject(res, function(acc, n) {
            if(Object.isArray(n) && Object.isFunction(n[1])) {
                acc.push(n);
            }
            return acc;
        });
    };

    jPlex.include('jplex.components.*');

    var ds3 = new DataSource(DataSource.TYPE_ARRAY, f(jplex.components.Calendar), {
        properties:[
            {key:"name", path:'[0]'},
            {key:"params", path:"[1].argumentNames().join(', '); new Date().format('F, l jS @ H:i:s');"}
        ]
    });

    var cols3 = [
        {label:"Method name", key:"name", sort:Datatable.Sorter.String},
        {label:"Parameters", key:"params"}
    ];

    new Datatable("ProtoString", ds3, cols3, {
        select: Datatable.SELECT_SINGLE,
        sortedBy: { order:Datatable.Sorter.ORDER_ASC, key:'name' },
        key: "name"
    });
    
</script>
</body>
</html>